Style Customization

Midone use SASS as a default css preprocessing, you can found all the SASS files in one single place at /resources/sass/* directory. Every single component SASS file are imported in /resources/sass/app.scss. You can modify this file to add or remove components depends to your needs. Here is the part things you need to know about the /resources/sass/app.scss structure and functions.

• Fonts: This section is supposed to import all the template used fonts.
• Breakpoint: This file is contains screen breakpoint variables that used by the template components.
• 3rd Parties: This section supposed to import all 3rd parties SASS or CSS files.
• Animations: This section supposed to import all custom animations used by the template.
• Components: This section supposed to import all component SASS files used by the template.

 
                         
                            // Fonts 
                            @import 'fonts/roboto'; 
                            
                            // Breakpoint 
                            @import 'breakpoint'; 
                            
                            // 3rd Parties 
                            @import '~slick-carousel/slick/slick'; 
                            @import '~slick-carousel/slick/slick-theme'; 
                            @import '~highlight.js/scss/github'; 
                            @import '~tooltipster/dist/css/tooltipster.bundle.min'; 
                            @import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min'; 
                            @import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min'; 
                            @import '~daterangepicker/daterangepicker'; 
                            @import '~select2/src/scss/core'; 
                            @import '~dropzone/src/dropzone'; // Animations 
                            @import 'typing-dots'; 
                            @import 'zoom-in'; 
                            @import 'intro'; // Components 
                            @import 'top-bar'; 
                            @import 'app'; 
                            @import 'login'; 
                            @import 'mini-chat-box'; 
                            @import 'mini-chat-list'; 
                            @import 'mini-chat'; 
                            @import 'table'; 
                            @import 'table-report'; 
                            @import 'report-timeline'; 
                            @import 'report-chart'; 
                            @import 'search'; 
                            @import 'input'; 
                            @import 'button'; 
                            @import 'notification'; 
                            @import 'image-fit'; 
                            @import 'box'; 
                            @import 'report-box'; 
                            @import 'global'; 
                            @import 'content'; 
                            @import 'top-nav'; 
                            @import 'side-nav'; 
                            @import 'breadcrumb'; 
                            @import 'tailwind'; 
                            @import 'top-bar-boxed'; 
                            @import 'mobile-menu'; 
                            @import 'pagination'; 
                            @import 'dropdown'; 
                            @import 'modal'; 
                            @import 'tab'; 
                            @import 'checkbox'; 
                            @import 'file'; 
                            @import 'inbox-filter'; 
                            @import 'inbox'; 
                            @import 'scrollbar'; 
                            @import 'chat'; 
                            @import 'boxed-tabs'; 
                            @import 'chat-dropdown'; 
                            @import 'wizard'; 
                            @import 'blog'; 
                            @import 'news'; 
                            @import 'pricing-tabs'; 
                            @import 'accordion'; 
                            @import 'error-page'; 
                            @import 'tooltip'; 
                            @import 'datatable-wrapper'; 
                            @import 'datepicker'; 
                            @import 'select2'; 
                            @import 'summernote'; 
                            @import 'slick'; 
                            @import 'jquery-validation'; 
                            @import 'slick'; 
                            @import 'source-preview'; 
                            @import 'search-result'; 
                            @import 'notification-content';